<div class="container-fluid" ng-show="detailId=='0'">
  <div class="card card-query">
    <div class="content">
      <div class="row">
        <div class="col-md-6">
          <h4 class="title">开始时间</h4>
          <div class="input-daterange input-group form-group">
            <input type="text" class="form-control" ng-model="queryParams.startedAfter" datetime-picker/>
            <span class="input-group-addon">
              <i class="fa fa-exchange"></i>
            </span>
            <input type="text" class="form-control" ng-model="queryParams.startedBefore" datetime-picker/>
          </div>
        </div>
        <div class="col-md-6">
          <h4 class="title">是否完成</h4>
          <div class="form-group">
            <select class="form-control" ng-model="queryParams.finished">
              <option value="">全部</option>
              <option value="true">是</option>
              <option value="false">否</option>
            </select>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <h4 class="title">结束时间</h4>
          <div class="input-daterange input-group form-group">
            <input type="text" class="form-control" ng-model="queryParams.finishedAfter" datetime-picker/>
            <span class="input-group-addon">
              <i class="fa fa-exchange"></i>
            </span>
            <input type="text" class="form-control" ng-model="queryParams.finishedBefore" datetime-picker/>
          </div>
        </div>

        <div class="col-md-6">
          <h4 class="title">流程定义</h4>
          <div class="input-group form-group">
            <select class="form-control" chosen  ng-model="queryParams.processDefinitionId" placeholder-text-single="'选择流程定义'" no-results-text = "'没有结果匹配'">
              <option value="">全部</option>
              <option ng-repeat="option in definitions" value="{{option.id}}">{{option.name+' (v'+option.version+')'}}</option>
            </select>
            <span class="input-group-btn">
                <button type="button" class="btn btn-info" ng-click="queryInstance()">搜索</button>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="content">
      <table ng-table="tableOptions" class="table table-striped ng-table">
      </table>
    </div>
  </div>
</div>

<div class="container-fluid" ng-if="detailId!='0'">
  <div class="card card-detail">
    <div class="header">
      <h4 class="title">
        <span class="text-info right-split">{{selectedItem.processDefinitionName}}</span>{{selectedItem.id}}
        <button type="button" class="btn btn-warning pull-right" ng-click="gotoList()">返回列表</button>
      </h4>
    </div>
    <div class="content">
      <div class="row">
        <div class="col-md-10">
          <span class="property"><label>ID:</label>{{selectedItem.id}}</span>
          <span class="property"><label>名称:</label>{{selectedItem.processDefinitionName}}</span>
          <span class="property"><label>启动人:</label>{{selectedItem.startUserName}}</span>
          <span class="property"><label>启动节点:</label>{{selectedItem.startActivityId}}</span>
          <span class="property"><label>开始时间:</label>{{selectedItem.startTime}}</span>
          <div ng-if="selectedItem.endTime != null">
            <span class="property"><label>结束时间:</label>{{selectedItem.endTime}}</span>
            <span class="property"><label>状态:</label>结束</span>
          </div>
          <div ng-if="selectedItem.endTime == null">
            <span class="property"><label>状态:</label>{{selectedItem.suspended?'挂起':'激活'}}</span>
          </div>
          <span class="property"><label>删除理由:</label>{{selectedItem.deleteReason}}</span>
        </div>
        <div class="col-md-2">
          <button type="button" class="btn btn-danger btn-block" ng-show="selectedItem.endTime == null" ng-click="deleteInstance(selectedItem)">删除</button>
        </div>
      </div>
    </div>
  </div>
  <div class="card card-detail">
    <div class="content">
      <div class="nav-tabs-navigation">
        <div class="nav-tabs-wrapper">
          <ul uib-tabset active="active" type="tabs">
            <uib-tab index="0" heading="流程表单"></uib-tab>
            <uib-tab index="1" heading="流程图"></uib-tab>
            <uib-tab index="2" heading="任务列表" select="queryTask(selectedItem.id)"></uib-tab>
            <uib-tab index="3" heading="子流程" select="queryChildInstance(selectedItem.id)"></uib-tab>
          </ul>
        </div>
      </div>
      <div class="tab-content">
        <div class="tab-pane text-center" ng-class="{'active':active==0}">
          <iframe ng-src="{{getFormUrl(selectedItem.definition.id)}}" iframe-onload></iframe>
        </div>
        <div class="tab-pane text-center" ng-class="{'active':active==1}">
          <img ng-src="{{getImageUrl(selectedItem.id)}}" />
        </div>
        <div class="tab-pane" ng-class="{'active':active==2}">
          <table ng-table="taskTableOptions" class="table table-striped ng-table">
          </table>
          <br/>
        </div>
        <div class="tab-pane" ng-class="{'active':active==3}">
          <table ng-table="childrenTableOptions" class="table table-striped ng-table">
          </table>
          <br/>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/ng-template" id="instance-delete.html">
  <div class="form-group">
    <label class="control-label">流程名称</label>
    <input type="text" class="form-control" ng-model="formData.name" readonly></input>
  </div>
  <div class="form-group">
    <label class="control-label">删除理由</label>
    <textarea class="form-control" ng-model="formData.deleteReason" rows="3"></textarea>
  </div>
</script>